<template>
	<view class="info" v-if="movieData.movieName">
		<headSearch></headSearch>
		<view class="movSubject view">
			<view class="h1">{{movieData.movieName}}</view>
			<view class="section">
				<view class="left">
					<view class="score">
						<view v-if="movieData.movieScore">
							<tui-rate :current="movieData.movieScore" :quantity="5" :size="13" active="#FFB712" :hollow="true"></tui-rate>
							<text class="NumberSoc">{{movieData.movieScore}}</text>
						</view>
						<view v-else>
							<view>
								暂无评分
							</view>
						</view>
						<!-- <view>9812人评价</view> -->
					</view>
					<view class="info">
						<text v-for="(tag) in movieData.movietag" :key="tag">{{tag}} / </text>
					</view>
				</view>
				<view class="right">
					<image :src="movieData.movieImg" />
				</view>
			</view>
			<view class="look">
				<view class="look-li" :class="{action:relationType=='想看'}" @click="addRelation('想看')">想看</view>
				<view class="look-li" :class="{action:relationType=='看过'}" @click="addRelation('看过')">看过</view>
			</view>
			<view class="introduct">
				<view class="h2">{{movieData.movieName}}</view>
				<view class="p" :class="[show?'':'action']">
					<text class="span">{{movieData.movieComm}}</text>
					<text class="a" @click="disAll" v-show="show">...<text class="span">(展开)</text></text>
				</view>
			</view>
			<movieUser :movieUserList="movieData.performerList"></movieUser>
			<moreTag :tagList="movieData.movietag"></moreTag>
			<user-content :movieId="movieId"></user-content>
			<footerIndex></footerIndex>
			<view class="round  cu-avatar lg text-gray  bg-grey addCotent flex justify-center align-center" @click="gocontent">
				<text class="cuIcon-add text-white"></text>
			</view>
		</view>
	</view>
</template>

<script>
	import headSearch from '../../components/headSearch/headSearch.vue';
	import movieUser from '../../components/movieUser/movieUser.vue';
	import moreTag from '../../components/moreTag/moreTag.vue';
	import footerIndex from '../../components/footerIndex/footerIndex.vue';
	import userContent from '../../components/userContent/userContent.vue';
	export default {
		data() {
			return {
				movieId: 1,
				show: true,
				height: uni.upx2px(120),
				movieData: {},
				relationType: ''
			};
		},
		methods: {
			disAll() {
				this.show = false;
			},
			getMovieById() {
				this.$api.getMovieById({
					movieId: this.movieId
				}, (res) => {
					if (res.code) {
						this.movieData = res.data.movie[0];
						this.relationType = res.data.movie[0].relationType;
					}
				})
			},
			gocontent() {
				this.$common.navigateTo('/pages/content/content?movieId=' + this.movieId);
			},
			addRelation(val) {
				if (this.relationType == val) {
					return;
				}
				this.$api.addRelation({
					relationType: val,
					movieId: this.movieId
				}, (res) => {
					if (res.code) {
						this.$common.successToShow(res.data, () => {
							this.relationType = val;
						})
					}
				})
			}
		},
		onLoad(option) {
			this.movieId = option.movieId;
			this.getMovieById()
		},
		components: {
			headSearch,
			movieUser,
			moreTag,
			footerIndex,
			userContent
		}
	}
</script>

<style lang="scss">
	.addCotent {
		position: fixed;
		right: 40upx;
		bottom: 80upx;
		opacity: 0.8;
	}

	.movSubject {
		padding: 0 36upx;
		background-color: #fff;
		overflow: hidden;
	}


	.movSubject .h1 {
		line-height: 64upx;
		padding: 60upx 0 10upx 0;
		font-size: 48upx;
		font-weight: 500;
	}

	.section {
		margin-bottom: 60upx;
		display: flex;

		.left {
			width: 430upx;
			padding-right: 48upx;
			font-size: 28upx;
			line-height: 1.6;
			color: #494949;

			.score {
				height: 36upx;
				line-height: 36upx;
				font-size: 30upx;
				text-align: left;
				display: flex;
			}

			.info {
				margin-top: 30upx;
				font-size: 28upx;
			}
		}

		.right {
			width: 200upx;
			height: 280upx;

			image {
				width: 200upx;
				height: 280upx;
			}
		}
	}

	.look {
		display: flex;
		margin-bottom: 60upx;

		.look-li {
			flex-grow: 1;
			height: 60upx;
			text-align: center;
			line-height: 60upx;
			font-size: 30upx;
			border: 1upx solid #ffb712;
			color: #ffb712;
			border-radius: 6upx;
			margin-left: 20upx;

			&.action {
				background-color: #42bd56;
			}
		}
	}


	.movSubject {
		.h2 {
			height: 40upx;
			margin-bottom: 30upx;
			font-size: 30upx;
			font-weight: 500;
			color: #aaa;
		}

		.introduct .p {
			overflow: hidden;
			font-size: 15px;
			color: #494949;
			position: relative;
			height: 120upx;

			&.action {
				height: auto;
			}

			.a {
				position: absolute;
				bottom: 0;
				right: 1px;
				background-color: #fff;

				.span {
					color: #42bd56;
				}
			}
		}

	}
</style>
